<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>苏州电信智慧物联网</title>
    <!--<link rel="shortcut icon" href="favicon.ico">-->
    <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/levels3.css"/>
    <script src="js/modernizr-custom.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/list.min.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mousewheel.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/template.js"></script>
    <script src="js/extra.js"></script>
    <script src="js/main.js"></script>
    <script src="js/common.js"></script>
</head>
<body data-building="3">
<svg class="hidden">
    <defs>
        <symbol id="icon-search" viewBox="0 0 32 32">
            <!--<title>search</title>-->
            <path class="path1"
                  d="M26.819 24.917c0.262 0.262 0.262 0.688 0 0.951l-0.951 0.951c-0.263 0.262-0.688 0.262-0.951 0l-6.656-6.656c-0.072-0.072-0.12-0.158-0.153-0.248-1.365 0.998-3.041 1.593-4.862 1.593-4.562 0-8.261-3.699-8.261-8.261s3.699-8.261 8.261-8.261c4.562 0 8.261 3.699 8.261 8.261 0 1.821-0.595 3.497-1.593 4.862 0.091 0.032 0.176 0.080 0.248 0.153l6.656 6.656zM13.246 7.739c-3.041 0-5.508 2.466-5.508 5.508s2.466 5.508 5.508 5.508 5.508-2.466 5.508-5.508c0-3.041-2.466-5.508-5.508-5.508z"></path>
        </symbol>
        <symbol id="icon-stack" viewBox="0 0 32 32">
            <!--<title>stack</title>-->
            <path class="path1"
                  d="M29.143 11.071l-13.143-6.571-13.143 6.571 13.143 6.571 13.143-6.571zM16 6.681l8.781 4.39-8.781 4.39-8.781-4.39 8.781-4.39zM26.51 14.684l2.633 1.316-13.143 6.571-13.143-6.571 2.633-1.316 10.51 5.255zM26.51 19.612l2.633 1.316-13.143 6.571-13.143-6.571 2.633-1.316 10.51 5.255z"></path>
        </symbol>
        <symbol id="icon-cross" viewBox="0 0 24 24">
            <!--<title>cross</title>-->
            <path class="path1"
                  d="M18.016 5.125q0.369 0 0.614 0.245t0.245 0.614q0 0.363-0.248 0.611l-5.411 5.405 5.411 5.405q0.248 0.248 0.248 0.611 0 0.369-0.245 0.614t-0.614 0.245q-0.363 0-0.611-0.248l-5.405-5.411-5.405 5.411q-0.248 0.248-0.611 0.248-0.369 0-0.614-0.245t-0.245-0.614q0-0.363 0.248-0.611l5.411-5.405-5.411-5.405q-0.248-0.248-0.248-0.611 0-0.369 0.245-0.614t0.614-0.245q0.363 0 0.611 0.248l5.405 5.411 5.405-5.411q0.248-0.248 0.611-0.248z"></path>
        </symbol>
        <symbol id="icon-angle-up" viewBox="0 0 21 32">
            <!--<title>angle-up</title>-->
            <path class="path1"
                  d="M19.196 21.143q0 0.232-0.179 0.411l-0.893 0.893q-0.179 0.179-0.411 0.179t-0.411-0.179l-7.018-7.018-7.018 7.018q-0.179 0.179-0.411 0.179t-0.411-0.179l-0.893-0.893q-0.179-0.179-0.179-0.411t0.179-0.411l8.321-8.321q0.179-0.179 0.411-0.179t0.411 0.179l8.321 8.321q0.179 0.179 0.179 0.411z"></path>
        </symbol>
        <symbol id="icon-angle-down" viewBox="0 0 21 32">
            <!--<title>angle-down</title>-->
            <path class="path1"
                  d="M19.196 13.143q0 0.232-0.179 0.411l-8.321 8.321q-0.179 0.179-0.411 0.179t-0.411-0.179l-8.321-8.321q-0.179-0.179-0.179-0.411t0.179-0.411l0.893-0.893q0.179-0.179 0.411-0.179t0.411 0.179l7.018 7.018 7.018-7.018q0.179-0.179 0.411-0.179t0.411 0.179l0.893 0.893q0.179 0.179 0.179 0.411z"></path>
        </symbol>
    </defs>
</svg>
<div class="container">
    <div class="main">
        <header class="codrops-header">
            <h1>智慧物联网</h1>
        </header>
        <a href="map.html" class="backToIndex">返回地图</a>
        <a href="#" class="logout">退出登录</a>
        <div class="mall">
            <div class="surroundings">
                <!--<img class="surroundings__map" src="img/floor1/BG.svg" alt="Surroundings"/>-->
            </div>
            <div id="html_floor" class="levels">
                <!-- 楼层加载处 -->
            </div>
            <div id="multi_switch">
                <a href="index.html" title="电信新楼">电信新楼</a>
                <a href="index2.html" title="电信老楼">电信老楼</a>
                <a class="active" href="index3.html" title="营业厅">营业厅</a>
            </div>
            <!-- 添加新的传感器-->
            <div id="addNew" onclick="addNew(this,event)">添加传感器</div>
            <!-- 放大缩小-->
            <div id="scaleSwitch">
                <div class="switch" title="放大">+</div>
                <div class="switch" title="还原">o</div>
                <div class="switch" title="缩小">-</div>
            </div>
        </div>
        <button class="boxbutton boxbutton--dark open-search" aria-label="Show search">
            <svg class="icon icon--search">
                <use xlink:href="#icon-search"></use>
            </svg>
        </button>
        <nav class="mallnav mallnav--hidden">
            <button class="boxbutton mallnav__button--up" aria-label="Go up">
                <svg class="icon icon--angle-down">
                    <use xlink:href="#icon-angle-up"></use>
                </svg>
            </button>
            <button class="boxbutton boxbutton--dark mallnav__button--all-levels" aria-label="Back to all levels">
                <svg class="icon icon--stack">
                    <use xlink:href="#icon-stack"></use>
                </svg>
            </button>
            <button class="boxbutton mallnav__button--down" aria-label="Go down">
                <svg class="icon icon--angle-down">
                    <use xlink:href="#icon-angle-down"></use>
                </svg>
            </button>
        </nav>
        <div class="content">
            <div id="html_desc">
                <!-- 描述加载处 -->
            </div>
            <button class="boxbutton boxbutton--dark content__button content__button--hidden"
                    aria-label="Close details">
                <svg class="icon icon--cross">
                    <use xlink:href="#icon-cross"></use>
                </svg>
            </button>
        </div>
        <div class="asideCtrl" onclick="$('body').toggleClass('asideDown')"></div>
    </div>
    <aside class="spaces-list" id="spaces-list">
        <div class="search">
            <input class="search__input" placeholder="搜索设备名称"/>
            <button class="boxbutton boxbutton--darker close-search" aria-label="Close details">
                <svg class="icon icon--cross">
                    <use xlink:href="#icon-cross"></use>
                </svg>
            </button>
        </div>
        <!--<span class="label">-->
        <!--<input id="sort-by-name" class="label__checkbox" type="checkbox" aria-label="Show alphabetically"/>-->
        <!--<label class="label__text">排序</label>-->
        <!--</span>-->
        <ul id="html_seo" class="list grouped-by-category">
            <!-- 分类搜索导航列表加载处 -->
        </ul>
    </aside>
</div>
<!--<div id="illustration">-->
    <!--<div class="ilu_title">图标说明：</div>-->
    <!--<div class="ilu_item">-->
        <!--<svg class="ilu_icon">-->
            <!--<use xlink:href="#icon-elevator"></use>-->
        <!--</svg>-->
        <!--电梯-->
    <!--</div>-->
    <!--<div class="ilu_item">-->
        <!--<svg class="ilu_icon">-->
            <!--<use xlink:href="#icon-tea"></use>-->
        <!--</svg>-->
        <!--休息室-->
    <!--</div>-->
    <!--<div class="ilu_item">-->
        <!--<svg class="ilu_icon">-->
            <!--<use xlink:href="#icon-cinema"></use>-->
        <!--</svg>-->
        <!--门锁-->
    <!--</div>-->
    <!--<div class="ilu_item">-->
        <!--<svg class="ilu_icon">-->
            <!--<use xlink:href="#icon-flipflop"></use>-->
        <!--</svg>-->
        <!--卫生间-->
    <!--</div>-->
    <!--<div class="ilu_item">-->
        <!--<svg class="ilu_icon">-->
            <!--<use xlink:href="#icon-grass"></use>-->
        <!--</svg>-->
        <!--出入口-->
    <!--</div>-->

<!--</div>-->
<script id="tpl_floor" type="text/html">
    <%for(var i = 0; i < data.length; i++) {%>
    <%var lInx = i + 1; level = data[i];%>
    <div class="level level--<%=lInx%>" data-floor="<%=level.floor%>" aria-label="">

        <!--<img width="100%" height="100%" src="<%=level.src%>">-->

        <div class="level__pins">
            <%var points = level.points%>
            <%for(var j = 0; j < points.length; j++) {%>
            <%var pInx = j + 1; point = points[j]%>
            <a class="pin" style="left:<%=point.left%>vmin;top:<%=point.top%>vmin;" data-category="<%=point.category%>"
               data-space="<%=lInx%>-<%=pInx%>" href="javascript:void(0)"
               title="<%=point.name%>"></a>
            <%}%>
        </div>
    </div>
    <%}%>
</script>
<script id="tpl_desc" type="text/html">
    <%for(var i = 0; i < data.length; i++) {%>
    <%var lInx = i + 1; level = data[i];%>
    <%var points = level.points%>
    <%for(var j = 0; j < points.length; j++) {%>
    <%var pInx = j + 1; point = points[j]%>
    <div class="content__item" data-space="<%=lInx%>-<%=pInx%>" data-category="<%=point.category%>">
        <select onchange="byContentType(this);" class="content__select">
        <option value="">请选择分类</option>
        <option value="1"
        <%=isSelect(1,point.category)%> >门锁</option>
        <option value="2"
        <%=isSelect(2,point.category)%> >地磁</option>
        <option value="3"
        <%=isSelect(3,point.category)%> >烟感</option>
        <option value="4"
        <%=isSelect(4,point.category)%> >能耗</option>
        </select>
        <%if(point.category=='1'){%>
        <div class="doorOperate">
            <div class="operateBtn">打开</div>
            <div class="operateBtn">关闭</div>
        </div>
        <%}%>
        <div class="allDiv uf">
            <div class="uf-f uf uf-ver">
                <div class="uf">
                    <!--<input readonly class="content__item-title" value="<%=point.name%>">-->
                    <div readonly contenteditable="false" class="content__item-title" placeholder="名称"><%=point.name%></div>
                    <div class="content__status">正常</div>
                </div>
                <textarea readonly class="uf-f content__desc" placeholder="描述"><%=point.desc%></textarea>
            </div>
            <div class="content__operate uf uf-ver uf-pja">
                <div class="desc_edit">编辑</div>
                <div class="desc_delete">删除</div>
            </div>
        </div>

    </div>
    <%}%>
    <%}%>
</script>
<script id="tpl_seo" type="text/html">
    <%for(var i = 0; i < data.length; i++) {%>
    <%var lInx = i + 1; level = data[i];%>
    <%var points = level.points%>
    <%for(var j = 0; j < points.length; j++) {%>
    <%var pInx = j + 1; point = points[j]%>
    <li class="list__item" data-floor="<%=level.floor%>" data-level="<%=lInx%>" data-category="<%=point.category%>" data-categoryname="<%=point.name%>"
        data-space="<%=lInx%>-<%=pInx%>"><a
            href="#" class="list__link"><%=point.name%></a>
    </li>
    <%}%>
    <%}%>
</script>
<script>
    var data = [
        {
            "floor": "L1",
            "src": "img/floor2/L5.svg",
            "points": [
                {
                    "category": "2",
                    "name": "地磁01",
                    "desc": "描述/实时信息",
                    "left": 83.12370486656202,
                    "top": 28.201883830455255
                },
                {
                    "category": "1",
                    "name": "门锁005",
                    "desc": "买啥大事嗲速度和覅速回复阿三地方还是都",
                    "left": 18.882574568288852,
                    "top": 41.86059654631083
                },
                {
                    "category": "3",
                    "name": "烟感",
                    "desc": "正常",
                    "left": 47.95007849293564,
                    "top": 42.53485086342229
                },
                {
                    "category": "1",
                    "name": "门锁007",
                    "desc": "门锁维修中",
                    "left": 75.12182103610675,
                    "top": 49.27660910518053
                }
            ]
        },
        {
            "floor": "L2",
            "src": "img/floor2/L5.svg",
            "points": [
                {
                    "category": "4",
                    "name": "电表",
                    "desc": "sdaskjdfhaksfhkasjhkla",
                    "left": 67.86875981161695,
                    "top": 34.97943485086342
                },
                {
                    "category": "2",
                    "name": "地磁",
                    "desc": "良好",
                    "left": 23.148037676609107,
                    "top": 25.548351648351648
                },
                {
                    "category": "1",
                    "name": "门锁002",
                    "desc": "检测中",
                    "left": 56.88383045525903,
                    "top": 42.24050235478807
                },
                {
                    "category": "1",
                    "name": "门锁001",
                    "desc": "345234和高级很过分价格基高级科技攻关",
                    "left": 40.86483516483517,
                    "top": 42.221821036106746
                },
                {
                    "category": "1",
                    "name": "门锁008",
                    "desc": "岁的法国韩国和环境和高级很过分价格基高级科技攻关",
                    "left": "83.22747252747253",
                    "top": "11.261224489795918"
                },
                {
                    "category": "2",
                    "name": "地磁",
                    "desc": "看过的法国韩国和环境和高级很过分价格基高级科技攻关",
                    "left": "86.44301412872842",
                    "top": "17.791208791208792"
                }
            ]
        },
        {
            "floor": "L3",
            "src": "img/floor2/L5.svg",
            "points": [
                {
                    "category": "4",
                    "name": "电表2",
                    "desc": "正常运转",
                    "left": 25.403453689167975,
                    "top": 30.896389324960754
                },
                {
                    "category": "1",
                    "name": "门锁006",
                    "desc": "控制中",
                    "left": 56.32213500784929,
                    "top": 42.496546310832024
                }
            ]
        }
    ];
    if (sessionStorage.getItem("dataStr2")) { //本地暂存数据 todo renew
        data = JSON.parse(sessionStorage.getItem("dataStr2"));
//        console.log(JSON.stringify(data));
    }
    tplStart(data);
</script>
</body>
</html>